<template>
  <div>
  <div style="display: flex;width: 100vw;height: 80px;padding-bottom: 20px" >
<div style="font-size:30px;display: flex;justify-content: center;align-items: center;height: 100px;padding-bottom: 20px;width: 25vw">非遗文化体验馆在线预约系统</div>
    <div class="home-header-menu" style="display:flex;justify-content:center;width: 75vw;">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"

      >
        <el-menu-item style="color:#3a3053" index="/home">首页</el-menu-item>
        <el-menu-item style="color:#3a3053" index="/museum">体验馆</el-menu-item>
        <el-menu-item style="color:#3a3053" index="/activity">非遗项目</el-menu-item>
        <el-menu-item style="color:#3a3053" index="/goods">文创商场</el-menu-item>
        <el-menu-item style="color:#3a3053" index="/activity/collection">收藏</el-menu-item>
        <el-menu-item style="color:#3a3053" index="/announcement">公告信息</el-menu-item>



      </el-menu>
    </div>



    <div style="margin-top: 20px">
      <svg
          style="cursor: pointer"
          @click="goTo"
          t="1735018393779" class="icon" viewBox="0 0 1251 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5142" width="60" height="60"><path d="M1235.176138 4.928451c-17.629028-11.089227-58.573867 0-58.573867 0S72.513312 461.008463 32.70583 477.784474s-42.650874 60.564241-11.942245 74.21252l339.216618 152.690129 21.325437-50.328031-305.095918-135.34544L1116.606708 85.680772 501.865444 678.243581a126.530926 126.530926 0 0 0-42.650874 82.174018l-25.590524 257.895618 52.034066 5.402444s24.453168-235.148485 25.590524-253.061853a76.487234 76.487234 0 0 1 19.050724-44.925587l647.440267-625.546152-152.690129 511.810488-90.704192 302.252527c-2.559052 8.245836-8.245836 11.373566-15.354314 7.961497l-327.558713-142.16958-22.747132 49.475014s302.536866 132.786388 332.676817 145.29731a61.417259 61.417259 0 0 0 82.174017-43.78823c9.383192-32.130325 257.611279-860.410298 261.592027-875.480274s13.932619-35.542395-9.95187-50.61237z" p-id="5143" fill="#2c2c2c"></path></svg>

    </div>
    <el-dropdown @command="clickmenu">
        <span class="el-dropdown-link ">
    <div
        style="display: flex;justify-content: center;align-items: center;height: 100px;padding-bottom: 20px;width: 10vw">

                <div class="image">
            <img :src="userPic || 'http://localhost:9999/uploadImage/userimg.png'" alt="" srcset="" style="width: 50px;height: 50px"/>
          </div>



    </div>
        </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="outlogin">退出登录</el-dropdown-item>
        <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
        <el-dropdown-item command="cart">我的购物车</el-dropdown-item>
        <el-dropdown-item command="orders">我的订单</el-dropdown-item>
        <el-dropdown-item command="booking">我的预约</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  props: {
    activeIndexProp: {
      type: String,
      default: "1",
    },
    activeIndex2Prop: {
      type: String,
      default: "1",
    }
  },
  data() {
    return {
      nickname:JSON.parse(localStorage.getItem("userInfo")).userNickname,
      userPic:JSON.parse(localStorage.getItem("userInfo")).userPic,
      activeIndex: this.activeIndexProp,
      activeIndex2: this.activeIndex2Prop,
    };
  },
  methods: {

    // 点击下拉菜单回调
    clickmenu(e) {
      if (e === 'outlogin') {
        this.outLogin()
      }else  if (e === 'userInfo') {
        this.$router.push('/userInfo')
      }else if (e==='cart'){
        this.$router.push('/cart')
      }else if (e==='orders'){
        this.$router.push('/orders')
      }else if (e==='booking'){
        this.$router.push('/booking')
      }
    },
    goTo(){
      window.location.href = "http://localhost:8888/login";
    },
    // 退出登录
    outLogin() {
      localStorage.removeItem('userInfo')
      window.location.href = "http://localhost:8889/login";
      setTimeout(()=>{
        window.location.reload()
      },500)
    },
    handleSelect(key, keyPath) {
       this.$router.push(key)
      console.log("Selected menu item:", key, keyPath);
    },
  },
};
</script>

<style scoped>

.el-menu-demo {
  margin-bottom: 20px;
}

.home-header-menu .el-menu--horizontal>.el-menu-item {
  font-size: 20px;
  height: 100px;
  line-height: 100px;
}
.home-header-menu .el-menu--horizontal>.el-submenu .el-submenu__title {
  font-size: 20px;
  height: 100px;
  line-height: 100px;
}

.home-header-menu .el-menu--horizontal {
  border-bottom:0px
}
</style>
